<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="../../css/turn.css"> -->
    <style type="text/css">
        /*.page {
            position: relative;
            background-image: url(../../image/demo_bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: scroll;
            background-color: #ccc;
        }*/
        .vueApp {
            height: 100vh;
        }
        .voice-box {
            position: absolute;
            z-index: 990;
        }
        .voice-box.area {
            background-color: rgba(255,194,29,0.2);
        }
        .voice-box .detail_voice {
            margin: 4px 0 0 6px;
            width: 20px;
            height: 20px;
        }
        body {
            width: 100vw;
            height: 100vh;
        }
        .detail {
            position: absolute;
            width: 12px;
            height: 12px;
        }
        .detail.p0 {
            top: 0;
            left: 0;
        }
        .detail.p1 {
            top: 0;
            right: 0;
        }
        .detail.p2 {
            bottom: 0;
            left: 0;
        }
        .detail.p3 {
            bottom: 0;
            right: 0;
        }
        .page-bg {
            overflow: scroll;
            background-color: white;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }
        .flipbook .shadow,
        .flipbook.shadow{
          -webkit-box-shadow: 0 4px 10px #666;
          -moz-box-shadow: 0 4px 10px #666;
          -ms-box-shadow: 0 4px 10px #666;
          -o-box-shadow: 0 4px 10px #666;
        }
        /* .courseContentImg {
            width: 100%;
            height: -webkit-fill-available;
            max-width: initial;
        } */

        .pinch-zoom,.pinch-zoom .courseContentImg{
            width: 100%;
            -webkit-user-drag: none;
            -moz-user-drag: none;
            -ms-user-drag: none;
        }

        .btn-prev {
            display: none;
            z-index: 999;
            position: absolute;
            right: 74px;
            bottom: 6px;
            width: 42px;
            height: 28px;
        }

        .btn-next {
            z-index: 999;
            position: absolute;
            right: 12px;
            bottom: 6px;
            width: 42px;
            height: 28px;
        }

        .offset {
            bottom: 55px;
        }
    </style>
</head>
<bodys>
    <div class="vueApp" v-cloak>
        <div class="flipbook">
            <div class="page-bg" v-for="item,index in listData">
                <div class="pinch-zoom" v-if="loadEnd">
                    <img :src="item.catalogIcon" class="courseContentImg">
                    <div v-if="courseData[index]">
                        <div :class="isShowVoice || subItem.isPlay ? 'voice-box area' : 'voice-box'" :style="subItem,scale|voiceStyle" v-for="subItem,_index in courseData[index]" @click="handlePlay(_index, event)">
                            <!-- <img class="detail_voice" src="../../image/course/detail_voice.png" alt=""> -->
                            <!-- 左上 -->
                            <img v-if="isShowVoice || subItem.isPlay" src="../../image/course/detail0.png" class="detail p0" alt="">
                            <!-- 右上 -->
                            <img v-if="isShowVoice || subItem.isPlay" src="../../image/course/detail1.png" class="detail p1"alt="">
                            <!-- 左下 -->
                            <img v-if="isShowVoice || subItem.isPlay" src="../../image/course/detail2.png" class="detail p2" alt="">
                            <!-- 右下 -->
                            <img v-if="isShowVoice || subItem.isPlay" src="../../image/course/detail3.png" class="detail p3" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-prev" :class="{'offset': isFull}" @click="handlePrev()">
            <img src="../../image/course/btn_prev.png" alt="">
        </div>
        <div class="btn-next" :class="{'offset': isFull}" @click="handleNext()">
            <img src="../../image/course/btn_next.png" alt="">
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- <script type="text/javascript" src="../../script/libs/modernizr.2.5.3.min.js"></script> -->
<script type="text/javascript" src="../../script/libs/turn.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/localFile.js"></script>
<script type="text/javascript" src="../../script/pinch-zoom.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var vueHeight = 0, pageParam = {};
    var playIndex = -1, isPlayAll = false;
    var imgScal = 1;
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        // pageParam.listData.reverse();
        fnInit();
        // 初始化下载
        initLocalDownload();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: {
                    width: 375,
                    height: 645
                },
                isFull: false,
                scale: 1,
                isShowVoice: false, // 是否展示可点击区域
                listData: pageParam.listData, // 课文列表
                courseData: [], // 课文数据
                courseIndex: 0,
                isPlay: false,
                loadEnd: false // 图片是否加载完毕
            },
            filters: {
                voiceStyle: function(item, scale) {
                    var result = 'top: '+ item.repCoordinatey*scale*imgScal 
                                + 'px;left: ' + item.repCoordinatex*scale*imgScal
                                + 'px;width: ' + item.repWidth*scale*imgScal
                                + 'px;height: '+ item.repHeight*scale*imgScal + 'px';
                    return result;
                }
            }
        });
        // addItemToListData();
        fnSetCourseImgSize(loadTurnPages);
        getPageData();
        // 初始化语音播放
        Audio.init();
        // 设置音频播放时间回调
        addAudioEvent();
        // 页面消失，停止播放
        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
        });

        // setTimeout(function() {
        //     yepnope({
        //         test: Modernizr.csstransforms,
        //         yep: ['../../script/libs/turn.min.js'],
        //         complete: loadApp
        //     });
        // }, 200)
        // var boxs = $('.page');
        // for(var i = 0; i < boxs.length; i ++) {
        //     // addPageGesture(boxs[i], i);
        // }
    }

    // 添加 item 到 listData
    function addItemToListData() {
        var listData = vm.listData;
        listData.unshift(listData[listData.length - 1]);
        listData.push(listData[1]);
    }

    // 加翻页效果
    function loadTurnPages() {
        $('.flipbook').turn({
            display: 'single',
            gradients: true,
            elevation: 50,
            duration: 1000,
            width: window.screen.availWidth,
            height: vueHeight,
            autoCenter: true,
            acceleration: true
        });
        // $(".flipbook").turn("page", 2).turn('stop');
        // function _stop(page) {
        //     if(page === vm.listData.length) {
        //         fnToast('当前已经是第一页了');
        //         $(".flipbook").turn("page", 2).turn('stop');
        //     } else if(page === 1) {
        //         $(".flipbook").turn("page", vm.listData.length - 1).turn('stop');
        //     }
        // }
        if(vm.listData.length === 1) {
            $('.btn-prev').hide();
            $('.btn-next').hide();
        }
        $('.flipbook').bind('turned', function(event, page, view) {
            if(page === 1) {
                $('.btn-prev').hide();
                $('.btn-next').show();
            } else if (page === vm.listData.length) {
                $('.btn-prev').show();
                $('.btn-next').hide();
            } else {
                $('.btn-prev').show();
                $('.btn-next').show();
            }
            // _stop(page);
            page -= 1;
            if(vm.isPlay || isPlayAll) {
                isPlayAll = false;
                Audio.pause();
                vm.isPlay = false;
                setIndexIsPlay(playIndex);
                playIndex = -1;
            }
            vm.scale = 1;
            vm.listData[vm.courseIndex].scale = 1;
            vm.courseIndex = page;
            getPageData();
            api.execScript({
                name: api.winName,
                script: 'setCourseIndex("'+ page +'");'
            });
        });
        // new RTP.PinchZoom($('.flipbook'), {});
        // var boxs = $('.courseContentImg');
        // for(var i = 0; i < boxs.length; i ++) {
        //     addPageGesture(boxs[i], i);
        // }
        new PinchZoom($('.flipbook')[0], {
            use2d: false,
            draggableUnzoomed: false
        });
    };

    // 上一页
    function handlePrev() {
        event.stopPropagation();
        $('.flipbook').turn('previous');
    }

    // 下一页
    function handleNext() {
        event.stopPropagation();
        $('.flipbook').turn('next');
    }

    // 设置课程图片尺寸
    function fnSetCourseImgSize(callback) {
        var src = vm.listData[vm.courseIndex].catalogIcon,
            img = new Image(),
            availWidth = window.screen.availWidth;
        img.src = src;
        img.onload = function() {
            vm.info = {
                height: img.naturalHeight,
                width: img.naturalWidth
            };
            vueHeight = availWidth*vm.info.height/vm.info.width;
            // console.error(vueHeight);
            // $('.vueApp').css('height', vueHeight);
            // $('.vueApp').css('margin', (api.frameHeight -vueHeight)/2 + 'px 0');
            imgScal = availWidth/375;
            vm.courseIndex = 0;
            vm.loadEnd = true;
            callback && callback();
        };
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function(eventType, _playIndex) {
            if(eventType == 0) {
                // 播放结束
                vm.isPlay = false;
                setIndexIsPlay(playIndex);
                playIndex = -1;
                isPlayAll = false;
                api.execScript({
                    name: api.winName,
                    script: 'setIsPlayAll(false);'
                });
            }else if(eventType == 3) {
                setIndexIsPlay(playIndex, false);
                // 播放下一个
                playIndex = _playIndex;
                setIndexIsPlay(playIndex);
            }
        };
        var progressCallback = function(progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }

    // 设置课程那个播放暂停
    function setIndexIsPlay(index, isPlay) {
        var list = deepCopy(vm.courseData),
            course = list[vm.courseIndex];
        course = setPropertyInArray(course, 'isPlay', false);
        list[vm.courseIndex] = course;
        var item = course[index];
        isPlay = isPlay === undefined ? vm.isPlay : isPlay;
        item.isPlay = isPlay;
        vm.courseData = list;
    }

    // 播放单个
    function handlePlay(index, e) {
        console.log('播放单个---------');
        // fnStopPropagation(e);
        // 暂停
        try {
            if(playIndex == index || vm.isPlay) {
                Audio.pause();
                playIndex = -1;
                vm.isPlay = false;
                console.log('播放暂停')
            }
            playIndex = index;
            var src = vm.courseData[vm.courseIndex][index].src;
            Audio.setListAndPlay([{src: src}], 0, 0);
            vm.isPlay = true;
            console.info('play=='+src);
            setIndexIsPlay(index);
        }catch(e) {
            console.error(e);
        }
    }

    // 页面跳转暂停播放
    function handlePagePause() {
        Audio.pause();
    }

    // 顺序播放全部
    function playAll() {
        if(isPlayAll) {
            if(vm.isPlay) {
                vm.isPlay = false;
                Audio.pause();
            }else {
                Audio.play(playIndex);
                vm.isPlay = true;
            }
            isPlayAll = false;
        }else {
            playIndex = 0;
            Audio.init(vm.courseData[vm.courseIndex], false, true);
            Audio.play();
            vm.isPlay = true;
            isPlayAll = true;
        }
        setIndexIsPlay(playIndex);
        api.execScript({
            name: api.winName,
            script: 'setIsPlayAll('+isPlayAll+');'
        });
    }

    // 设置课文列表
    function setListData(listData) {
        vm.listData = listData;
    }

    // 是否展示可点击区域
    function handleShowVoice(isShowVoice) {
        vm.isShowVoice = isShowVoice;
    }

    // function addPageGesture(box, index) {
    //     var boxGesture=setGesture(box);  //得到一个对象
    //     var item = vm.listData[index];
    //     item.scale = item.scale || 1;
    //     var start = false;
    //     boxGesture.gesturestart=function(){  //双指开始
    //         console.log('开始缩放');
    //         start = true;
    //     };
    //     boxGesture.gesturemove=function(e){  //双指移动
    //         // box.innerHTML = e.scale+"<br />"+e.rotation;
    //         // rotate("+e.rotation+"deg)
    //         // box.style.transform="scale("+e.scale+")";//改变目标元素的大小和角度
    //         if(start) {
    //             item.scale = e.scale*item.scale;
    //             start = false;
    //         }else {
    //             item.scale = e.scale;
    //         }
    //         vm.scale = item.scale;
    //         // if(item.scale < 1) {
    //         //     return;// 不需要缩小
    //         // }
    //         box.style.width = item.scale*window.screen.availWidth + 'px';
    //         box.style.height = vueHeight*item.scale + 'px';
    //         console.log('box.style.width==='+ box.style.width + '=====box.style.height===='+ box.style.height);
    //     };
    //     boxGesture.gestureend=function(){  //双指结束
    //         console.info('缩放结束');
    //     };
    // }

    // function setGesture(el){
    //     var obj={}; //定义一个对象
    //     var istouch=false;
    //     var start=[];
    //     el.addEventListener("touchstart",function(e){
    //         if(e.touches.length>=2){  //判断是否有两个点在屏幕上
    //             istouch=true;
    //             start=e.touches;  //得到第一组两个点
    //             obj.gesturestart&&obj.gesturestart.call(el); //执行gesturestart方法
    //         };
    //     },false);
    //     document.addEventListener("touchmove",function(e){
    //         if(e.touches.length>=2&&istouch){
    //             e.preventDefault();
    //             var now=e.touches;  //得到第二组两个点
    //             var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例，getDistance是勾股定理的一个方法
    //             var rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]);  //得到旋转角度，getAngle是得到夹角的一个方法
    //             e.scale=scale.toFixed(2);
    //             e.rotation=rotation.toFixed(2);
    //             obj.gesturemove&&obj.gesturemove.call(el,e);  //执行gesturemove方法
    //         };
    //     },false);
    //     document.addEventListener("touchend",function(e){
    //         if(istouch){
    //             istouch=false;
    //             obj.gestureend&&obj.gestureend.call(el);  //执行gestureend方法
    //         };
    //     },false);
    //     return obj;
    // };
    // function getDistance(p1, p2) {
    //     var x = p2.pageX - p1.pageX,
    //         y = p2.pageY - p1.pageY;
    //     return Math.sqrt((x * x) + (y * y));
    // };
    // function getAngle(p1, p2) {
    //     var x = p1.pageX - p2.pageX,
    //         y = p1.pageY- p2.pageY;
    //     return Math.atan2(y, x) * 180 / Math.PI;
    // };

    // 获取页面数据
    function getPageData() {
        if(vm.courseData[vm.courseIndex]) return; // 已有数据无需请求
        var url = 'question/findQuestionList';
        var params = {
            id: vm.listData[vm.courseIndex].id,
            questionTypeCode: vm.listData[vm.courseIndex].questionTypeCode
        };
        var callback = function(data) {
            var listData = data.listData;
            for(var i = 0; i < listData.length; i ++) {
                var item = listData[i];
                item.src = fileIsSave(item.id+'questionAudioUrl') || item.questionAudioUrl;
            }
            var list = deepCopy(vm.courseData);
            // listData = listData.reverse();
            list[vm.courseIndex] = listData;
            vm.courseData = list;
        };
        POST(url, params, callback);
    }
</script>
</html>